<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
  >
    <Form :model="formData" ref="formRef">
      <div v-for="(item, index) in addIntegralformSchema">
        <FormItem v-bind="item" v-if="item.component" :name="item.field">
          <Input
            v-if="item.component === 'Input'"
            :placeholder="'请输入' + item.label"
            v-model:value="formData[item.field]"
          ></Input>
          <InputNumber
            v-if="item.component === 'InputNumber'"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            v-model:value="formData[item.field]"
          ></InputNumber>
          <DatePicker
            v-if="item.component === 'DatePicker'"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label"
            v-model:value="formData[item.field]"
          ></DatePicker>
          <Ainput
            v-if="item.component == 'Ainput'"
            mode="single"
            v-model:value="formData[item.field]"
            :placeholder="'请选择' + item.label"
            @success="handleSuccess"
          ></Ainput>
        </FormItem>
      </div>
    </Form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { addIntegralformSchema } from './role.data';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTree, TreeItem } from '@/components/Tree';
  import { sysUserAddReadIntegralApi } from '@/api/sys/sysData';
  import { Form, FormItem, Input, InputNumber, DatePicker, Select, Switch } from 'ant-design-vue';
  import Ainput from '@/views/bookManage/components/account/Ainput.vue';

  import { useMessage } from '@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const treeData = ref<TreeItem[]>([]);
  const { createMessage } = useMessage();
  const formData = ref({});
  const formRef = ref();
  const userId = ref('');

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //打开弹层后的回调

    setModalProps({ confirmLoading: false });
    formData.value = {};
    isUpdate.value = !!data?.isUpdate;
    userId.value = '';
    if (unref(isUpdate)) {
      console.log('---data.record:', data.record);
      userId.value = data.record.userId;
      let json = {
        userId: userId.value,
      };
      formData.value = data.record;
    }
  });

  const getTitle = computed(() => '增加用户读书积分');

  async function handleSubmit() {
    try {
      formRef.value.validate().then(() => {
        const values = formData.value;
        setModalProps({ confirmLoading: true });
        //保存
        sysUserAddReadIntegralApi(values)
          .then((res) => {
            // console.log("---res::",res)
            if (res.code == 200) {
              createMessage.success(res.message);
            } else {
              createMessage.error(res.message);
            }
          })
          .catch((res) => {
            createMessage.error(res.message);
          })
          .finally(() => {
            closeModal();
            emit('success');
          });
      });
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  function handleSuccess(e) {
    formData.value.userId = e.ids;
    formData.value.userName = e.names;
    formRef.value.clearValidate();
  }
</script>
